<template>
	<view class="post-page" @touchmove="touchMove" @touchend="touchEnd">
		<view class="form-box">
			<view class="form-item row" @click="demandShow = true">
				<view class="label">
					<text class="text">{{ $t('填报需求') }}</text>
				</view>
				<view class="input-box">
					<input class="input input-select" type="text" v-model="form.type_name" placeholder="请选择" disabled />
					<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text class="text">{{ $t('内容') }}</text>
				</view>
				<textarea class="textarea" v-model="form.content" placeholder="请输入" />
			</view>
			<view class="form-item">
				<view class="label">
					<text class="text">{{ $t('上传音频') }}</text>
				</view>
				<view class="audio-box">
					<view class="upload-success" v-if="form.voice">
						<view class="sy-audio">
							<le-audio
								:activeIndex="0"
								:audioData="audioData"
								:showAudioListIcon="false"
								:showAudioSpeedIcon="false"
								:autoplay="false"
								:loopPlay="false"
							></le-audio>
						</view>
						<button class="again-btn" size="mini" @click="againVoice">重新录音</button>
					</view>
					<view class="voice-box" v-else @touchstart="touchStart">
						<image class="icon" src="@/static/icons/voice.png" mode="aspectFill"></image>
						<view class="text">{{ $t('按住录音') }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="btn-box">
			<button class="btn" @click="submitBefore">{{ $t('提交') }}</button>
		</view>
		
		<view class="voice-mask" v-if="voiceState !== 0">
			<view class="voice-enter" v-if="voiceState === 1">
				<view class="flex">
					<image class="icon" src="@/static/icons/luyin.png" mode="aspectFill"></image>
					<view class="volume">
						<view class="volume-3"></view>
						<view class="volume-2"></view>
						<view class="volume-1"></view>
					</view>
				</view>
				<view class="text">{{ $t('向上滑动取消') }}</view>
			</view>
			<view class="voice-cancel" v-else>
				<image class="icon" src="@/static/icons/quxiaofabu.png" mode="aspectFill"></image>
				<view class="text">{{ $t('取消') }}</view>
			</view>
		</view>
		
		<u-select v-model="demandShow" :list="demandArrayLocale" @confirm="demandChange"></u-select>
	</view>
</template>

<script>
	import $config from '@/api/http.baseUrl.js'
	export default {
		data() {
			return {
				form: {
					type_name: '',
					content: '',
					voice: '',
					voice_time:0
				},
				
				demandArray: [
					'租房',
					'买房',
					'雇工',
					'求职',
					'土地流转',
					'土地买售'
				],
				demandShow: false,
				
				/* 录音 */
				rec: null,
				voiceState: 0, // 语音输入状态 （0-未点击语音；1-输入中；2-取消）
				voiceCancelState: false, // 语音取消状态
				startLocation: 0, // 记录滑动初始点击，在页面上的位置
				locationY: 0, // 手指上下滑动的距离
				
				audioData: []
			}
		},
		methods: {
			submitBefore(){
				var that = this;
				uni.showLoading({ mask: true })
				
				// 先把录音文件上传上去
				if(this.form.voice){
					uni.uploadFile({
						url: `${$config.baseUrl}/system/basic/postUploadOne`,
						filePath:this.form.voice,
						name: 'img',
						formData: {
							'type': 'file'
						},
						success: (uploadFileRes) => {
							let file = JSON.parse(uploadFileRes.data);
							that.form.voice = file.path
							that.submit();
						},
						fail: () => {
							uni.hideLoading({ noConflict: true })
						}
					});
				}else{
					this.submit();
				}
			},
			submit(){
				this.$u.api.forum_add(this.form).then(res => {
					uni.hideLoading({ noConflict: true })
					
					if (res.code === 1) {
						this.$u.toast(res.msg)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500)
					}
				}).catch((err) => {
					uni.hideLoading({ noConflict: true })
				})
			},
			demandChange (e) {
				const index = e[0].value
				this.form.type_name = this.demandArray[index]
			},
			/* 录音 */
			// 手指触碰到元素触发
			touchStart (e) {
				this.voiceState = 1
				this.voiceCancelState = false

				// 相对于父元素的距离
				this.startLocation = e.changedTouches[0].pageY
				
				// 开始录音
				this.rec = uni.getRecorderManager()
				this.rec.start({
					duration: 500000,
					sampleRate: 16000,
					format: 'mp3'
				})
				
				// 录音停止事件
				this.rec.onStop((res) => {
					if (this.voiceCancelState) return

					let tempFilePath = res.tempFilePath
					console.log(tempFilePath)
					this.form.voice = tempFilePath
					
					this.audioData = [{
						title: '录音',
						fileUrl: tempFilePath
					}]
					
					const innerAudioContext = uni.createInnerAudioContext()
					innerAudioContext.src = tempFilePath
					innerAudioContext.onCanplay(() => {
						this.form.voice_time = innerAudioContext.duration
					})
				})
				// 录音错误事件
				this.rec.onError((errMsg) => {
					console.log('录音错误事件', errMsg)
				})
			},
			// 手指滑动事件
			touchMove (e) {
				if (this.voiceState === 0) return
				
				let y = e.changedTouches[0].pageY - this.startLocation
				if (this.voiceState === 1 && y < -120) {
					this.voiceState = 2
					this.voiceCancelState = true
					// 暂停录音
					this.rec.pause()
				}
				if (this.voiceState === 2 && y > -120) {
					this.voiceState = 1
					this.voiceCancelState = false
					// 继续录音
					this.rec.resume()
				}

				this.locationY = y
			},
			// 手指松开事件
			touchEnd (e) {
				if (this.voiceState === 0) return

				this.voiceState = 0

				// 停止录音
				this.rec.stop()
			},
			againVoice () {
				this.form.voice = ''
			}
		},
		computed: {
			demandArrayLocale () {
				return [{
					label: this.$t('租房'),
					value: 0,
				}, {
					label: this.$t('买房'),
					value: 1,
				}, {
					label: this.$t('雇工'),
					value: 2,
				}, {
					label: this.$t('求职'),
					value: 3,
				}, {
					label: this.$t('土地流转'),
					value: 4,
				}, {
					label: this.$t('土地买售'),
					value: 5,
				}]
			}
		},
	}
</script>

<style lang="scss">
.post-page {
	min-height: 100%;
	.form-box {
		padding: 18rpx;
		.form-item {
			padding: 28rpx 0;
			border-bottom: 1rpx solid #efefef;
			&.row {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.label {
				display: inline-block;
				position: relative;
				&::after {
					content: '';
					display: block;
					position: absolute;
					bottom: 4rpx;
					right: 0;
					width: 28rpx;
					height: 10rpx;
					background-color: #fdf1a6;
				}
				.text {
					color: #333333;
					font-size: 28rpx;
					position: relative;
					z-index: 4;
				}
			}
			.input-box {
				flex: 1;
				display: flex;
				align-items: center;
				.input {
					margin-right: 8rpx;
					flex: 1;
					text-align: right;
				}
			}
			.textarea {
				margin-top: 28rpx;
				width: 100%;
				height: 140rpx;
			}
			.audio-box {
				margin-top: 28rpx;
				.upload-success {
					.again-btn {
						margin-top: 16rpx;
						color: #fff;
						font-size: 28rpx;
						background-color: #0089FF;
					}
				}
				.voice-box {
					margin-left: auto;
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
					border: 2rpx dashed #c0c0c0;
					background-color: #f8f8f8;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.icon {
						width: 54rpx;
						height: 54rpx;
					}
					.text {
						margin-top: 12rpx;
						color: #999999;
						font-size: 26rpx;
					}
				}
			}
		}
	}
	.btn-box {
		margin-top: 72rpx;
		padding: 0 74rpx 20rpx;
		.btn {
			height: 78rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 78rpx;
			background-color: #3e78fe;
		}
	}

	.voice-mask {
		position: fixed;
		z-index: 100;
		left: 50%;
		bottom: 40%;
		width: 370rpx;
		height: 370rpx;
		border-radius: 20rpx;
		transform: translateX(-50%);
		background-color: rgba($color: #000, $alpha: 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		.voice-enter {
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.volume {
				margin-left: 4rpx;
				display: flex;
				flex-direction: column;
				justify-content: start;
				gap: 12rpx;
				.volume-1, .volume-2, .volume-3 {
					height: 12rpx;
					border-radius: 12rpx;
					background-color: #fff;
				}
				.volume-1 {
					width: 40rpx;
				}
				.volume-2 {
					width: 50rpx;
				}
				.volume-3 {
					width: 60rpx;
					animation: visibilityAnimate 1s linear infinite;
				}
			}
		}
		.voice-cancel {
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.text {
				background-color: #df4c4c;
			}
		}
		.icon {
			width: 160rpx;
			height: 160rpx;
		}
		.text {
			margin-top: 20rpx;
			width: 240rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 8rpx;
		}
	}
	@keyframes visibilityAnimate {
		0% {
			opacity: 0;
		}
		10% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
}
</style>
